<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <style>
        html,body{margin: 0;}
    </style>
</head>
<body>
    <div id="picker">点击选择</div>
    <script src="scripts/picker.min.js"></script>
    <script>
        (function(global,factory){
            typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
            typeof define === 'function' && define.amd ? define(factory) :
            (global = global || self, global.pickerSchool = factory());
        }(this,function(){
            let pickerEl = document.querySelector("#picker")
            ,first = []
            ,second = []
            ,dftCheckedIndex = [0,0]
            ,curCheckedIndex = [0,0]
            ,provinces = {
                110000: '北京市',
                120000: '天津市',
                130000: '河北省',
                140000: '山西省',
                150000: '内蒙古自治区',
                210000: '辽宁省',
                220000: '吉林省',
                230000: '黑龙江省',
                310000: '上海市',
                320000: '江苏省',
                330000: '浙江省',
                340000: '安徽省',
                350000: '福建省',
                360000: '江西省',
                370000: '山东省',
                410000: '河南省',
                420000: '湖北省',
                430000: '湖南省',
                440000: '广东省',
                450000: '广西壮族自治区',
                460000: '海南省',
                500000: '重庆市',
                510000: '四川省',
                520000: '贵州省',
                530000: '云南省',
                540000: '西藏自治区',
                610000: '陕西省',
                620000: '甘肃省',
                630000: '青海省',
                640000: '宁夏回族自治区',
                650000: '新疆维吾尔自治区',
                710000: '台湾省',
                810000: '香港特别行政区',
                820000: '澳门特别行政区'
            }

            ,schools = {
                110000:[{text:'高校1',value:1},{text:'高校2',value:2}]
                ,120000:[{text:'高校3',value:3},{text:'高校4',value:4}]
            }

            ,setFirst = function(){
                Object.keys(provinces).forEach(code=>{
                    let obj = {
                        text:provinces[code]
                        ,value:code
                    }
                    first.push(obj)
                })
            }()

            ,setSecond = function(areaCode){
                second = schools[areaCode]
            }(110000)

            
            ,picker = new Picker({
                data: [first, second]
                ,selectedIndex: dftCheckedIndex
                ,title: '选择院校'
            })

            ,setCurChecked = function(column,checkedIndex){
                curCheckedIndex[column] = checkedIndex
            }

            ,getProvince = function(checkedIndex){
                return first[checkedIndex];
            }

            ,getSchools = function(areaCode){
                return second = schools[areaCode]? schools[areaCode]:[{text:'其它高校',value:'-1'}];
            }

            picker.on('picker.select', function (selectedVal, checkedIndex) {
                pickerEl.innerText = second[checkedIndex[1]].text;
            });

            picker.on('picker.change', function (column, checkedIndex) {
                setCurChecked(column,checkedIndex)

                if(column == 0){
                    let areaCode = getProvince(checkedIndex).value;
                    let second = getSchools(areaCode);
                    picker.refillColumn(1, second)
                    picker.scrollColumn(1, 0)
                }
            })

            pickerEl.addEventListener('touchend',function(){
                picker.show();
            })
            return picker;
        }));
    </script>
</body>
</html>